<template>
    <div class="app-container">
         <!-- 搜索工作栏 -->
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
            <el-form-item label="标题" prop="remindContent">
                <el-input v-model="queryParams.remindContent" placeholder="请输入标题" clearable />
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
                    <el-option v-for="(item,index) in statusList"
                            :key="index" :label="item.label" :value="item.value"/>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        
        <!-- 操作工具栏 -->
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                        v-hasPermi="['infra:test-demo:create']">新增</el-button>
            </el-col>
        </el-row>
        <!-- 列表 -->
        <el-table v-loading="loading" :data="list">
          <el-table-column
            label="序号"
            width="80"
            align="center"
          >
            <template slot-scope="scope">
              <span>{{
                scope.$index + (queryParams.pageNo - 1) * queryParams.pageSize + 1
              }}</span>
            </template>
          </el-table-column>
            <el-table-column label="标题" align="center" prop="remindContent" />
            <el-table-column label="开始时间" align="center" prop="startTime">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.startTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="结束时间" align="center" prop="endTime">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.endTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="状态" align="center" prop="status">
                <template slot-scope="scope">
                        <span>{{statusList.filter((_) => _.value ==scope.row.status)[0] && statusList.filter((_) => _.value ==scope.row.status)[0].label}}</span>
                    </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                            v-hasPermi="['system:tenant:update']">编辑</el-button>
                <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                            v-hasPermi="['system:tenant:delete']">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
         <!-- 分页组件 -->
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
                @pagination="getList"/>


         <el-dialog :visible.sync="dialogFormVisible"  :title="title" width="700px" @close='uploadClose'>
          <el-form ref="form" :model="form" :rules="rules" label-width="110px">
            <el-form-item label="开始时间" prop="startTime">
              <el-date-picker
                v-model="form.startTime"
                type="datetime"
                value-format="timestamp"
                :picker-options="pickerOptionsStart"
                placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间" prop="endTime">
              <el-date-picker
                v-model="form.endTime"
                value-format="timestamp"
                type="datetime"
                :picker-options="pickerOptionsEnd"
                placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="记录内容" prop="remindContent">
              <el-input
                type="textarea"
                :rows="3"
                placeholder="记录你将要做的一件事..."
                v-model="form.remindContent">
              </el-input>
            </el-form-item>
            <el-form-item label="提醒设置" prop="remindSet">
               <el-input-number v-model="form.remindSet" controls-position="right"  :min="1" :max="10"></el-input-number>
            </el-form-item>
            <el-form-item label="标签颜色" prop="backgroundColor">
              <el-color-picker v-model="form.backgroundColor"></el-color-picker>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="uploadClose">取 消</el-button>
            <el-button type="primary" @click="addDate">确 定</el-button>
          </div>
        </el-dialog>
    </div>
</template>

<script>
import { getOaList, creatDate, delDate, update} from "@/api/system/oa";
export default {
    name: 'list',
    data() {
        return {
             // 开始结束日期限制
            pickerOptionsStart: {
                disabledDate: (time) => {
                if (this.form.endTime) {
                    return (
                    time.getTime() >= new Date(this.form.endTime).getTime()
                    );
                }
                }
            },
            // 结束日期限制
           pickerOptionsEnd: {
                disabledDate: (time) => {
                    let beginDateVal = new Date(this.form.startTime).getTime()
                if (beginDateVal) { // 等于的时候是临界值00:00:00
                    return (time.getTime()) < beginDateVal - 1 * 24 * 60 * 60 * 1000
                }else{
                    return (
                    time.getTime() <= new Date(this.form.startTime).getTime()
                    );
                }
                // if (this.form.startTime) {
                //     return (
                //     time.getTime() <= new Date(this.form.startTime).getTime()
                //     );
                // }else{
                //     return (time.getTime()) <= beginDateVal - 8.64e7
                // }
                }
            },
            title: '添加日程',
            // 总条数
            total: 0,
            statusList: [
                {id:1, label: '未开始', value: 0},
                {id:2, label: '已提醒', value: 1},
                {id:3, label: '已完成', value: 2},
            ],
            loading: false,
            list: [],  //列表
            queryParams: {
                remindContent:'',
                status: '',
                pageNo: 1,
                pageSize: 10,
            },
            dialogFormVisible: false,
            form: {
                backgroundColor: '#fff',
                remindSet: 1
            },
            rules: {
                startTime: [{ required: true, message: "请选择开始时间", trigger: "blur" }],
                endTime: [{ required: true, message: "请选择结束时间", trigger: "blur" },{
                    type: 'string',
                    required: true,
                    trigger: 'blur',
                    validator: this.validateEndTime,
                }],
                remindContent: [{ required: true, message: "请输入记录内容", trigger: "blur" }],
                backgroundColor: [{ required: true, message: "请选择颜色", trigger: "blur" }],
                remindSet: [{ required: true, message: "请输入提醒设置", trigger: "blur" }],
            },
        }
       
    },
    mounted() {
        this.getList()
    },
    methods: {
        validateEndTime(rule, value, callback) {
            if (value === '') {
                callback(new Error('请选择结束时间'))
            } else {
                if (
                new Date(this.form.startTime).getTime() >=
                new Date(this.form.endTime).getTime()
                ) {
                callback(new Error('结束时间必须大于开始时间！'))
                } else {
                callback()
                }
            }
        },
        /** 查询列表 */
        getList() {
            this.loading = true;
            // 处理查询参数
            let params = {...this.queryParams};
            getOaList(params).then(response => {
                if(response.code === 0){
                    this.list = response.data.list;
                    this.total = response.data.total;
                    this.loading = false;
                }
            });
        },
        handleUpdate(row) {
            this.form = JSON.parse(JSON.stringify(row)) 
            this.form.id = row.id
            this.dialogFormVisible = true
            this.title = '修改日程'
        },
        handleDelete(row) {
            const id = row.id;
            this.$modal.confirm('确定删除该计划吗?').then(function() {
                return delDate(id);
                }).then(() => {
                this.getList();
                this.$modal.msgSuccess("删除成功");
            }).catch(() => {});
        },
        handleQuery() {
            this.queryParams.pageNo = 1;
            this.getList();
        },
        addDate() {
            this.$refs["form"].validate(valid => {
                if (!valid) {
                return;
                }
                this.form.sendTime = this.form.startTime
                if(this.title == '添加日程'){
                    creatDate(this.form).then((res) => {
                        if(res.code === 0 ){
                            this.$modal.msgSuccess("新增成功");
                            this.dialogFormVisible = false
                            this.getList();
                        }
                    })
                }else{
                    update(this.form).then((res) => {
                        if(res.code === 0 ){
                            this.$modal.msgSuccess("修改成功");
                            this.dialogFormVisible = false
                            this.getList();
                        }
                    })
                }
                
            })
        },
        uploadClose() {
            this.dialogFormVisible = false
            this.$refs.form.resetFields()
        },
        handleAdd() {
            this.form = {
                backgroundColor: '#fff',
                remindSet: 1
            }
            this.title = '添加日程'
            this.dialogFormVisible = true
        },
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },

    }
}
</script>
<style scoped>

</style>